<template>
    <div>
        <BasicTable @register="registerTable" :can-resize="true" :bordered="true" :striped="true" :loading="true">
            <template #userFlag="{ record }">
                <span>
                    {{ record.sex === true ? '男' : '女' }}
                </span>
            </template>

            <template #classFlag="{ record }">
                <span>
                    {{ options[record.classCode] }}
                </span>
            </template>
            <template #toolbar>
                <a-button type="primary" @click="onAddUser"> 录入数据 </a-button>
            </template>
            <template #action="{ record }">
                <TableAction :actions="[
            {
                icon: 'clarity:note-edit-line',
                onClick: onEditUser.bind(null, record),
            },
            {
                icon: 'ant-design:delete-outlined',
                color: 'error',
                popConfirm: {
                    title: '是否确认删除',
                    confirm: onDeleteUser.bind(null, record),
                },
            },
            {
                icon: 'ant-design:search-outlined',
                onClick: onViewUser.bind(null, record),
            },
            // {
            //   icon: 'ant-design:check-circle-outlined',
            //   // onClick: handleSetFlagSuccess.bind(null, record.id),
            // },
            // {
            //   icon: 'ant-design:close-circle-outlined',
            //   // onClick: handleSetFlagFail.bind(null, record.id),
            // },
        ]" />
            </template>
        </BasicTable>
        <add @register="registerAddForm" @success="onAddUserSuccess" />
        <studentView @register="registViewForm" @success="onAddUserSuccess" />
    </div>
</template>
<script lang="ts">
import { defineComponent, ref, provide, reactive } from 'vue';
// import { defineComponent, reactive } from 'vue';
// import moment from 'moment';
import { Tag } from 'ant-design-vue';

import { BasicTable, useTable, TableAction } from '/@/components/Table';
//使用modal弹出窗口
import { useModal } from '/@/components/Modal';

import add from './add.vue';
import studentView from './studentView.vue';

import { queryStudent, deleteStudent } from '/@/api/demo/student';
import { StudentTableColumns, StudentQueryForm } from './student.data';
import { useMessage } from '/@/hooks/web/useMessage';
import { OperationTypeEnum } from '/@/enums/appEnum';
const { createMessage } = useMessage();

export default defineComponent({
    name: 'studentManagemenet',
    components: { BasicTable, TableAction, Tag, add, studentView },
    setup() {
        //定义模块的名称，提供给子孙组件获取使用
        const moduleName = ref('学生管理');
        const options = ref({ "1001": "计算机科学与技术1班", "1002": "信息管理1班", "1003": "应用统计1班" })
        const [registerAddForm, { openModal: openAddForm }] = useModal();
        const [registViewForm, { openModal: openViewForm }] = useModal();
        const [registerTable, { reload }] = useTable({
            title: '学生信息管理',
            api: queryStudent, //api中指定的为table加载数据对应的查询方法
            columns: StudentTableColumns,
            formConfig: {
                labelWidth: 80, //设置查询表单中label的宽度
                schemas: StudentQueryForm,
                showResetButton: false, //查询条件部分中是否显示重置按钮
                autoSubmitOnEnter: true, // 回车事件;
            },
            useSearchForm: true,
            showTableSetting: true,
            bordered: true,
            showIndexColumn: true,
            actionColumn: {
                width: 80,
                title: '操作',
                dataIndex: 'action',
                slots: { customRender: 'action' },
                fixed: undefined, //表格操作列是否固定，不设置时默认固定在右侧
            },
        });
        function onAddUser() {
            //使用props传递数据至子组件，在data参数中指定
            openAddForm(true, { op: OperationTypeEnum.ADD });
            // openAddForm(true, {});
        }

        function onEditUser(record: Recordable) {
            openAddForm(true, { op: OperationTypeEnum.EDIT, dataId: record.no });
        }
        function onViewUser(record: Recordable) {
            openViewForm(true, { dataId: record.no });
        }
        function onDeleteUser(record: Recordable) {
            deleteStudent(record.no)
                .then((res) => {
                    console.log('res', res);
                    if (res == []) {
                        createMessage.success('删除成功。', 2);
                        reload();
                    }
                })
                .catch((ex) => {
                    console.log('catch ', ex);
                    createMessage.error(ex.msg);
                });
        }

        function onAddUserSuccess() {
            reload();
        }
        // function getAllClass() {
        //     queryAllClass()
        //         .then((res) => {
        //             var classOptions = [];
        //             for (let d of res) {
        //                 classOptions.push({ value: d.no, label: d.name });
        //             }
        //             console.log('re333333s', classOptions);
        //             return [...classOptions];
        //             reload();
        //         })
        //         .catch((ex) => {
        //             console.log('catch ', ex);
        //             createMessage.error(ex.msg);
        //         });
        // }
        provide('moduleName', moduleName);

        return {
            moduleName,
            options,
            registerTable,
            registerAddForm,
            registViewForm,
            onAddUser,
            onEditUser,
            onDeleteUser,
            onAddUserSuccess,
            onViewUser
        };
    },
});
</script>
